﻿@{
    ViewBag.Title = "Workflow Engine 3 Designer";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/konva.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ace.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/workflowdesigner.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/workflowdesigner.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/json5.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.auto-complete.min.js")" type="text/javascript"></script>

<style>
    a.button15 {
        display: inline-block;
        font-family: arial,sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: rgb(68,68,68);
        text-decoration: none;
        user-select: none;
        padding: .2em 1.2em;
        outline: none;
        border: 1px solid rgba(0,0,0,.1);
        border-radius: 2px;
        background: rgb(245,245,245) linear-gradient(#f4f4f4, #f1f1f1);
        transition: all .218s ease 0s;
    }

        a.button15:hover {
            color: rgb(24,24,24);
            border: 1px solid rgb(198,198,198);
            background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
        }

        a.button15:active {
            color: rgb(51,51,51);
            border: 1px solid rgb(204,204,204);
            background: rgb(238,238,238) linear-gradient(rgb(238,238,238), rgb(224,224,224));
            box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
        }

    .ui-dialog .ui-dialog-title {
        margin-top: 8px;
    }
</style>

<form action="" id="uploadform" method="post" enctype="multipart/form-data" onsubmit="tmp()" style="padding-bottom: 8px;">
    <table>
        <tr>
            <td>
                <a class="button15" href='javascript:OnNew()'>
                    <table>
                        <tr style="text-align:center">
                            <td style="height:35px;">New scheme</td>
                        </tr>
                    </table>
                </a>
            </td>
            <td>
                <a class="button15" href='javascript:OnSave()'>
                    <table>
                        <tr style="text-align:center">
                            <td style="height:35px;">Save scheme</td>
                        </tr>
                    </table>
                </a>
            </td>
            <td style="width:180px">
                <a class="button15" href='javascript:DownloadScheme()' style="text-decoration: none;">
                    <table>
                        <tr style="text-align:center">
                            <td>
                                <img height="32px" src="/Images/download.png" title="Click on this for download the workflow scheme" />

                            </td>
                            <td>Download XML</td>
                        </tr>
                    </table>
                </a>
            </td>
            <td style="width:180px">
                <a class="button15" href='javascript:SelectScheme("wfe")' style="text-decoration: none;">
                    <table>
                        <tr style="text-align:center">
                            <td>
                                <img height="32px" src="/Images/upload.png" title="Click on this for upload a workflow scheme" />
                            </td>
                            <td>Upload XML</td>
                        </tr>
                    </table>
                </a>
            </td>
            <td style="width:180px">
                <table>
                    <tr>
                        <td>
                            <a class="button15" href='javascript:DownloadSchemeBPMN()' style="text-decoration: none; width:160px">
                                Download BPMN2
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a class="button15" href='javascript:SelectScheme("bpmn")' style="text-decoration: none; width:160px">
                                Upload BPMN2
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <input type="file" name="uploadFile" id="uploadFile" style="display:none" onchange="javascript: UploadScheme();">
</form>
<div id="wfdesigner"></div>

<script>
    var QueryString = function () {
        // This function is anonymous, is executed immediately and
        // the return value is assigned to QueryString!
        var query_string = {};
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            // If first entry with this name
            if (typeof query_string[pair[0]] === "undefined") {
                query_string[pair[0]] = pair[1];
                // If second entry with this name
            } else if (typeof query_string[pair[0]] === "string") {
                var arr = [query_string[pair[0]], pair[1]];
                query_string[pair[0]] = arr;
                // If third or later entry with this name
            } else {
                query_string[pair[0]].push(pair[1]);
            }
        }
        return query_string;
    }();

    var schemecode = 'SimpleWF';
    var processid = QueryString.processid;
    var graphwidth = 1200;
    var graphheight = 600;

    var wfdesigner = undefined;
    function wfdesignerRedraw() {
        var data;

        if (wfdesigner != undefined) {
            data = wfdesigner.data;
            wfdesigner.destroy();
        }

        WorkflowDesignerConstants.FormMaxHeight = 600;
        wfdesigner = new WorkflowDesigner({
            name: 'simpledesigner',
            apiurl: '/Designer/API',
            renderTo: 'wfdesigner',
            imagefolder: '/Images/',
            graphwidth: graphwidth,
            graphheight: graphheight
        });

        if (processid != undefined && processid !== '')
            wfdesigner.readonlymode();

        if (data == undefined) {
            var p = { schemecode: schemecode, processid: processid};
            if (wfdesigner.exists(p))
                wfdesigner.load(p);
            else
                wfdesigner.create();
        }
        else {
            wfdesigner.data = data;
            wfdesigner.render();
        }
    }

    $(window).resize(function () {
        var w = $(window).width();
        var h = $(window).height();

        if (w > 300)
            graphwidth = w - 30;

        if (h > 300)
            graphheight = h - 100;

        wfdesignerRedraw();
    })

    $(window).resize();

function DownloadScheme(){
    wfdesigner.downloadscheme();
}

function DownloadSchemeBPMN() {
    wfdesigner.downloadschemeBPMN();
}

var selectSchemeType;
function SelectScheme(type) {
    if (type)
        selectSchemeType = type;

    var file = $('#uploadFile');
    file.trigger('click');
}

function UploadScheme() {

    if (selectSchemeType == "bpmn") {
        wfdesigner.uploadschemeBPMN($('#uploadform')[0], function () {
            wfdesigner.autoarrangement();
            alert('The file is uploaded!');
        });
    }
    else {
        wfdesigner.uploadscheme($('#uploadform')[0], function () {
            alert('The file is uploaded!');
        });
    }
}

function OnSave() {
    wfdesigner.schemecode = schemecode;

    var err = wfdesigner.validate();
    if (err != undefined && err.length > 0) {
        alert(err);
    }
    else {
        wfdesigner.save(function () {
            alert('The scheme is saved!');
        });
    }
}
function OnNew() {
    wfdesigner.create();
}
</script>